<template>
  <div class="page-wrapper">
    <div class="menu-tree">
      <BasicTree
        :tree-data="menus"
        showLine
        :checkStrictly="true"
        @select="handleSelect"
      >
        <template #title="dataRef">
          <div class="tree-node">
            <span>{{ dataRef.type === '1' ? 'P' : 'B' }}</span
            >{{ dataRef.title }}
            <PopConfirmButton
              title="确认删除"
              ok-text="是"
              cancel-text="否"
              type="link"
              @confirm.stop="handleDelete(dataRef.id)"
              >删除
            </PopConfirmButton>
            <a-button type="link" @click.stop="handleDataScope(dataRef)"
              >数据权限</a-button
            >
          </div>
        </template>
      </BasicTree>
    </div>
    <Card style="height: 100%; flex: 1" size="small">
      <template #extra
        ><a-button
          type="primary"
          :loading="loading"
          class="mr-2"
          @click="handleSubmit"
          >保存</a-button
        >
        <a-button type="primary" @click="handleCreate">新建</a-button></template
      >
      <BasicForm @register="registerForm" />
    </Card>
    <DataScopeDrawer @register="registerDataScopeDrawer" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useThrottleFn } from '@vueuse/core';
import { PopConfirmButton } from '@/components/Button';
import { Card } from 'ant-design-vue';
export default defineComponent({
  name: 'SysMenu',
});
</script>
<script lang="ts" setup>
import { ref, unref, onMounted } from 'vue';
import { BasicForm, useForm } from '@/components/Form/index';
import { useMessage } from '@/hooks/web/useMessage';
import {
  getMenuList,
  deleteMenu,
  editMenu,
  addMenu,
  detailMenu,
} from '@/api/sys/system';
import { BasicTree } from '@/components/Tree';
import { useDrawer } from '@/components/Drawer';
import DataScopeDrawer from './dataScope/DataScopeDrawer.vue';
import { formSchema } from './menu.data';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();
const menus = ref([]);
const loading = ref(false);
const isUpdate = ref(false);
const { createMessage } = useMessage();
const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] =
  useForm({
    labelWidth: 100,
    schemas: formSchema,
    showActionButtonGroup: false,
    baseColProps: {
      span: 12,
      sm: 24,
      xl: 12,
      lg: 12,
    },
  });
const changeLoading = (flag) => {
  loading.value = flag;
};
const getMenus = async () => {
  menus.value = (await getMenuList()) as unknown as Recordable[];
};
onMounted(async () => {
  getMenus();
  handleSetPidData();
});
const handleSelect = async (selectKeys, e) => {
  const { node, selected } = e;
  if (selected) {
    isUpdate.value = true;
    handleSetPidData();
    setFieldsValue(await detailMenu(node.id));
  } else {
    isUpdate.value = false;
    resetFields();
  }
};
const handleSetPidData = async () => {
  const treeData = await getMenuList();
  updateSchema({
    field: 'pid',
    label: '上级菜单',
    replaceSchema: true,
    component: 'TreeSelect',
    componentProps: {
      replaceFields: {
        title: 'title',
        key: 'id',
        value: 'id',
      },
      treeData: [
        {
          id: '0',
          pid: '-1',
          title: t('根菜单'),
          children: treeData,
        },
      ],
      getPopupContainer: () => document.body,
    },
  });
};
const handleCreate = () => {
  resetFields();
};
const handleSubmit = useThrottleFn(async () => {
  try {
    const values = await validate();
    changeLoading(true);
    if (unref(isUpdate)) {
      await editMenu(values);
      createMessage.success(t('更新成功'));
    } else {
      await addMenu(values);
      createMessage.success(t('保存成功'));
    }
  } finally {
    changeLoading(false);
  }
}, 1000);

const handleDelete = (id: string) => {
  deleteMenu(id).then(() => {
    getMenus();
    createMessage.success(t('删除成功'));
  });
};

const [registerDataScopeDrawer, { openDrawer: openDataScope }] = useDrawer();
const handleDataScope = (record: Recordable) => {
  openDataScope(true, {
    record,
  });
};
</script>
<style lang="less" scoped>
.page-wrapper {
  padding: 20px;
  display: flex;
  background-color: #fff;
}
.menu-tree {
  width: 50%;
}
.tree-node {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 15px;
    height: 15px;
    background-color: #000;
    margin-right: 5px;
  }
}
</style>
